<script setup lang="ts">
import { onMounted, ref } from "vue";
import { get,post } from "@/libs/request";
import { useDialogCase } from "@/libs/dialog";
import { ElMessage } from "element-plus";
const tableData = ref([]);
//加载分页数据
const getList = async () => {
  const res = await get("goodsCategory/getTree");
  if (res.errCode == 0) {
    tableData.value = res.data;
  }
};
/**
 * 添加
 * @param pid
 */
const addRow = (pid: number = 0) => {
  const dialog = useDialogCase();
  dialog.show({
    path: "goodsCategory/add",
    title: "添加分类",
    width: "30%",
    params: {
      pid,
    },
    callback: () => {
      getList();
    },
  });
};
/**
 * 编辑
 * @param row
 */
const editRow = (row: any) => {
  const dialog = useDialogCase();
  dialog.show({
    path: "goodsCategory/edit",
    title: "编辑分类",
    width: "30%",
    params: {
      catId: row.catId,
    },
    callback: () => {
      getList();
    },
  });
};
//修改排序
const handleChangeSort = async (row: any) => {
  const res = await post("goodsCategory/editSort", {
    catId: row.catId,
    sort: row.sort,
  });
  if (res.errCode == 0) {
    getList();
  }else{
    ElMessage.error(res.errMsg);
  }
};
//修改显示状态
const handleChangeShow = async (row: any) => {
  const res = await get(`goodsCategory/editShow/${row.catId}`);
  if (res.errCode == 0) {
    getList();
    ElMessage.success(res.errMsg);
  } else {
    ElMessage.error(res.errMsg);
  }
};
/**
 * 删除
 * @param row 
 */
const deleteRow = async (row: any) => {
  const res = await get(`goodsCategory/delete/${row.catId}`);
  if (res.errCode == 0) {
    ElMessage.success(res.errMsg)
    getList();
  }
};
onMounted(() => {
  getList();
});
</script>
<template>
  <div class="page">
    <div class="title">添加分类</div>
    <div class="toolbar">
      <el-button class="float-right" type="primary" @click="addRow()">添加分类</el-button>
    </div>
    <div class="main">
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="catId"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        border
        default-expand-all
      >
        <template #empty>
          <NoData />
        </template>
        <el-table-column prop="catName" label="分类名称" />
        <el-table-column prop="sort" label="排序" width="80">
          <template #default="scope">
            <el-input-number
              :controls="false"
              size="small"
              v-model="scope.row.sort"
              :min="0"
              :max="999"
              @change="handleChangeSort(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="80">
          <template #default="scope">
            <el-switch
              v-model="scope.row.isShow"
              :active-value="true"
              :inactive-value="false"
              @change="handleChangeShow(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" >
          <template #default="scope">
            <el-button
              v-if="scope.row.catLevel!=2"
              type="primary"
              size="small"
              @click="addRow(scope.row.catId)"
              >添加</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>